<template>
  <div class="swiper-wrap">
    <swiper
      :effect="'cards'"
      :grabCursor="true"
      :modules="[EffectCards]"
      class="my-swiper"
    >
      <swiper-slide class="swiper-slide" v-for="(item, index) in fragments" :key="index">
        <div class="swiper-slide__content">
          <img :src="item.img" alt="" srcset="">
          <p class="title">{{item.title}}</p>
          <p
            v-if="item.title !== item.subtitle"
            class="subtitle">
            {{item.subtitle}}
          </p>

          <a :href="item.link" target="_blank" class="next-button" rel="noopener noreferrer">去看看</a>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { EffectCards } from 'swiper/modules';
// 引入swiper样式和卡片特效样式
import 'swiper/css';
import 'swiper/css/effect-cards';
import {getFragmentsData} from '@/api/fragments'

const fragments = getFragmentsData()
</script>

<style scoped lang="scss">
.swiper-wrap {
  overflow: hidden;
  .my-swiper {
    width: 240px;
    height: 340px;

    .swiper-slide {
      border-radius: 16px;

      .swiper-slide__content {
        height: 100%;
        border-radius: 16px;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid var(--main-border-color);
        color: #323232;
        justify-content: center;
        padding: 16px;
        box-sizing: border-box;

        img {
          width: 90px;
          height: 90px;
        }

        .subtitle {
          font-size: 12px;
          margin-top: 16px;
          color: var(--item_left_text_color);
        }

        .title {
          font-weight: normal;
          font-size: 16px;
          margin: 0px;
          font-weight: 600;
          color: var(--item_left_title_color);
        }

        .next-button {
          margin-top: 20px;
          padding: 4px 8px;
          box-sizing: border-box;
          font-size: 12px;
          line-height: 20px;
          border-radius: 20px;
          cursor: pointer;
          border: 1px solid #B39DDB;
          color: var(--item_left_text_color);
        }
      }
    }
  }
}
</style>
